import _ from 'lodash';
import RecordDetailSvg from '@containers/asset-manage/components/asset-content/images/record-detail.svg';
import { LEVEL_COLOR } from '@util/constants';
import PropTypes from 'prop-types';
import React from 'react';

function VulFindRecord({ record }) {
  const { _id, scanType } = _.get(record, 'task_oid');

  const onedayId = _.get(record, 'oneday_detail_oid._id');
  const level = _.get(record, 'oneday_detail_oid.level');
  const category = _.get(record, 'oneday_detail_oid.vul_category');
  const name = _.get(record, 'oneday_detail_oid.name');
  const onedayHref =
    category === 'Weak Password'
      ? `/vul/weak-password/${onedayId}`
      : `/vul/oneday-detection/${onedayId}`;
  const detailTypeDist = {
    Zoomeye: '/task-manage/zoomeye-detail/',
    OneDay: '/task-manage/oneday-detail/',
    WeakPassword: '/task-manage/oneday-detail/',
    Web: '',
    Honeypot: '',
    VulDetect: '/task-manage/vul-detect-detail/'
  };
  const detailType = `${detailTypeDist[scanType]}${_id}`;
  return (
    <div className="vul-find-record">
      <div className="change-time">
        <span className="time">{_.get(record, 'created') || '-'} 更新</span>
        <a className="view-detail" href={detailType} target="_blank" rel="noopener noreferrer">
          查看详情
          <img src={RecordDetailSvg} alt="detail" />
        </a>
      </div>
      <div className="detail">
        <label className="label">{category === 'Weak Password' ? '弱口令' : '1DAY漏洞'}：</label>
        <div className="value">
          <a
            href={onedayHref}
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: LEVEL_COLOR[level] }}
          >
            {name || '-'}
          </a>
        </div>
      </div>
    </div>
  );
}

VulFindRecord.propTypes = {
  record: PropTypes.object
};

export default VulFindRecord;
